<template lang="pug">
	.my-qrcode-wrap
		.qrcode-item-wrap
			.title 社保卡(医保)
			.user-info(@click="goInfo")
				.left-box
					.name {{name}}
					.info 身份证：{{idNumber}}
				.right-arrow
			.qrcode-wrap(:style="{transform: 'scale(' + scale +','+ scale + ')'}")
				.qrcode-img(:style="{height:qrcode_w+'px',width:qrcode_w+'px'}")
					canvas(:style="{height:qrcode_w+'px',width:qrcode_w+'px'}" canvas-id="myQrcode")
						.logo
							img.icon(:src="logoImg")
					.hint 就医时，出示此二维码
		.qrcode-field
			field-item(text="电子健康卡" :img='fieldImg' :showArrow="true" :showBorder="false" @listenClick="authenticate")
</template>

<script>
import drawQrcode from 'weapp-qrcode'
import fieldItem from '@/components/field-item'
import healthCard from '@/assets/image/healthCard/qricon.png'
import securityCard from '@/assets/image/healthCard/securityIcon.png'
export default {
	name: 'securityCardQrcode',
	data() {
		return {
			name: '',
			idNumber: '',
			logoImg: securityCard,
			url: '',
			fieldImg: healthCard,
			qrcode_w: '',
			scale: ''
		}
	},
	created() {
		this.name = '李光耀'
		this.idNumber = '331002*****1110'
		this.url = '1'
	},
	mounted() {
		this.wx.setNavigationBarColor({
			frontColor: '#ffffff',
			backgroundColor: '#D1DF80',
			animation: {}
		})
		this.wx.setBackgroundColor({
			backgroundColor: '#D1DF80'
		})
		this.setQrcode()
	},
	methods: {
		setQrcode() {
			let rate = this.wx.getSystemInfoSync().windowWidth / 375
			this.qrcode_w = 200 * rate
			this.scale = 1 / rate
			drawQrcode({
				width: this.qrcode_w,
				height: this.qrcode_w,
				canvasId: 'myQrcode',
				text: this.url
			})
		},
		goInfo() {
			this.$router.push({
				path: '/views/healthCard/info'
			})
		}
	},
	components: {
		fieldItem
	}
}
</script>

<style lang="stylus">
	page
		background-color transparent!important
		.my-qrcode-wrap
			.qrcode-item-wrap
				border-radius 12px
				margin 30px 30px 0
				background-color white
				overflow hidden
				.title
					height 110px
					background-color backgroundColor
					font-size 32px
					line-height 110px
					text-align center
					color blackFontColor1A
				.user-info
					color blackFontColor
					padding 30px 40px
					border-bottom borderStyle
					display flex
					justify-content space-between
					align-items center
					.left-box
						.name
							font-size 36px
							font-weight 500
							color blackFontColor1A
							line-height 50px
						.info
							font-size 28px
							margin-top 5px
							color #aaa
							line-height 40px
					.right-arrow
						margin-left 6px
						width 16px
						height 24px
						centerBackground("../../assets/image/common/arrow_right_grey.png")
				.qrcode-wrap
					padding 98px 0 164px
					text-align center
					.hint
						font-size 30px
						color blackFontColor1A
						margin-top 24px
						line-height 42px
					.qrcode-img
						position relative
						margin 0 auto
						.logo
							position absolute
							padding 8px
							box-sizing border-box
							width 80rpx
							height 80rpx
							background-color white
							border-radius 10rpx
							left 50%
							top 50%
							transform translate(-50%,-50%)
							z-index 2
							overflow hidden
							img
								width 100%
								height 100%
			.qrcode-field
				margin 20px 30px
				border-radius 12px
				overflow hidden
</style>
